<template>
  <div>
    <h3 v-color="'blue'">自定义指令1</h3>
    <h3 v-color="color">自定义指令2</h3>

    <el-button type = "primary" @click = "change">改变颜色</el-button>
  </div>
</template>

<script>
export default {
  name: "myDirective",
  data() {
    return {
      color: 'red'
    }
  },
  directives: {
   /* color: {
      // 指令第一次绑定到元素上触发  如果 dom 被更新不会再执行，解决：用update函数
      bind: function (el, binding) {
        console.log('触发了v-color')
        console.log(binding)
        el.style.color = binding.value
      },
      update(el,binding){
        console.log('触发了update')
        el.style.color = binding.value
      }
    }*/

    // 可以简写成
    color(el,binding){
      el.style.color = binding.value
    }
  },
  methods:{
    change(){
      this.color = 'green'
    }
  }
}
</script>

<style scoped>

</style>
